{% extends "page_templates/banner_base.html" %}
{% load facebook_tags %}
{% block game_page_block %}
		<h3 style="text-align:center">{{ game.name }}</h3>
		<h4 style="text-align:center">Objective: {{ game.objective }}</h4>
		<button id="view_rules">Click to view Wiki and learn the ropes!</button></br>
		<button id="collapse_rules" style="display:none">Click to view Wiki and learn the ropes! (click to collapse)</button></br>
		<iframe style="display:none" id="rules" align="middle" width="900" height="1200" src="{{ game.rules_url }}" frameborder="0"></iframe></br>
		<button id="view_video">Click to view instructional video!</button></br></br>
		<button id="collapse_video" style="display:none">Click to view instructional video! (click to collapse)</button></br></br>
		<iframe style="display:none" id="instructional_video" align="middle" width="410" height="250" src="http://youtube.com/embed/{{  game.video_url }}" frameborder="0"></iframe>

	<script>
		$('#view_rules').click(function() {
			$('#collapse_rules').show('fast')
			$('#rules').show('fast')
			$('#view_rules').hide()
		});
		$('#collapse_rules').click(function() {
			$('#view_rules').show('fast')
			$('#rules').hide()
			$('#collapse_rules').hide()
		});
		$('#view_video').click(function() {
			$('#collapse_video').show('fast')
			$('#instructional_video').show('fast')
			$('#view_video').hide()
		});
		$('#collapse_video').click(function() {
			$('#view_video').show('fast')
			$('#collapse_video').hide()
			$('#instructional_video').hide()
		});

	</script>

{% endblock %}
